<template>
  <section>
    <h2>
      练习中心
      <small>({{ max }}内{{ typeText }}题目)</small>
      <span class="score">{{ score }}</span>
      <el-radio-group style="margin-left: 20px" :value="type">
        <el-radio
          v-for="item in types"
          :key="item"
          :label="item"
          @change="changeType(item)"
        >{{ texts[item] }}
        </el-radio>
      </el-radio-group>
    </h2>
    <exam-list ref="examList"></exam-list>
  </section>
</template>

<script>
  import { mapState } from 'vuex'

  import ExamList from './examList'

  const texts = {
    'ADD': '加法',
    'SUBTRACTION': '减法',
    'MULTIPLY': '乘法',
    'DIVIDE': '除法'
  }

  export default {
    name: 'exam',
    data() {
      return {
        texts
      }
    },
    computed: {
      ...mapState({
        exams: state => state.exam.exams,
        max: state => state.exam.max,
        types: state => state.exam.types,
        type: state => state.exam.type,
        score: state => state.exam.score
      }),
      typeText() {
        return texts[this.type]
      }
    },
    methods: {
      changeType(type) {
        this.$refs.examList.resetForm()
        this.$store.commit('SET_EXAM', {
          type,
          showRes: false
        })
        this.$store.dispatch('refreshExam')
      }
    },
    mounted() {
      this.$store.dispatch('refreshExam')
    },
    components: {
      ExamList
    }
  }
</script>

<style lang="scss" scoped>
  small {
    color: #666;
  }
</style>
